沒想到與React和Vue你看我我看你地過著的這段日子雖然過程難熬，但回頭看卻又發現時間過得居然如此的快，轉眼間已經到了鐵人賽的最後一天了！雖然已經到了最後一天，但是秉持著有始有終的信念，在最後的這一天也稍微來看一下這段期間與React和Vue相處之間最精華、最重要的一些回顧內容吧:)
Vue及React雖然都是透過Virtual DOM來更新畫面，但是觸發畫面渲染的機制卻有差異。Vue是以響應式自動監聽mutable state的變動，來觸發渲染。React則是透過執行set state來通知React我們要對state進行immutable的更動，再近一步比對新舊state是否有變動，來決定是否要呼叫functional component來進行重新渲染。
另外由於React重新渲染會重新呼叫整個functional component的特性，為了因應這樣的特性來提高整體的效能，所以在set state的部分還有一個與Vue很不一樣的特性，就是批次更新(batch state updates)，在這樣的特性下，state的實際更新，並不會在set state之後就執行，而是會在整個event handler都執行完後才統一進行，所以會在畫面渲染完成後，才會拿到更新的state。如果需要在set state執行後，就取得更新後的state進行一些操作，會需要使用updater function。
在Vue和React中，有兩組hook很像，分別是「computed和useMemo」及「watch和useEffect」。
useMemo與computed一樣都可以緩存一個經過複雜計算後的值，且也都會在相依值有變動時，才進行重新計算的動作，也就可以避免進行不必要的計算。
useEffect雖然跟watch很相似，可以在相依值有變動時，來進行一些邏輯操作，但是它的特性不只有這樣。useEffect在第一次渲染時就會先執行一次副作用，而且在每次重新渲染之前都會先執行一次cleanup清除前一次的副作用，再進行副作用，所以也會有人認為useEffect是一個生命週期的hook。但如果了解了useEffect整體的特性後，就會發現useEffect其實既不是watch也不是生命週期hook，它就是在處理副作用的hook而已，每個元件都會有它自己的副作用，當一些state有變動時，也會產生相對應的副作用，所以useEffect只是在操作這些副作用的執行時機來達到我們想要進行的操作和邏輯。
在React中提到效能優化，很多人都會想到useMemo & memo和useCallback，但是並不是只要使用就一定能達到優化效能的效果，還必須搞懂它們實際上是針對什麼樣的情境來優化。
以useMemo來說，它主要是緩存複雜計算後的結果，來避免重新進行多餘的重新計算，只在有相依的值有變動時，才進行重新計算；useCallback主要是用來緩存一個函式，但是單純緩存函式並不會對效能優化有太大的幫助，也不是單純的緩存函式，就能達到避免畫面重新渲染的效果。如果想讓useCallback發揮避免重新渲染的效果，必須搭配memo一起做使用，因為用memo包起來的元件，當它的父元件重新渲染時，會依照props有無變動來決定自己是不是也要重新渲染。因為重新渲染時，會跑整個component function，元件裡面的函式也會被重新創建，若沒有透過useCallback進行緩存的話，當把這個函式透過props傳入子元件中，就算子元件有用memo包起來，還是會因為函式被重新創建，而導致子元件也連帶著重新渲染，所以使用memo時，若子元件有透過props把函式帶入，就會需要比useCallback當作輔助，來避免子元件進行不必要的重新渲染。
除了透過useMemo避免進行多餘的重新計算和把useCallback當作輔助手段搭配memo來避免元件進行多餘的重新渲染，還可以透過lazy搭配suspense來進行元件的動態載入及拆分程式碼，避免在第一次進入畫面時，一次載入當前頁面不需要的程式碼，避免畫面渲染出現阻塞的狀況，並且透過suspense fallback來處理等待要的程式碼下載完成前的時段，改善整體的使用者體驗。
除了了解渲染機制及一些hooks的使用外，這次也看了Redux的使用以及React-router-dom的使用。
在Vuex的使用上，主要是透過mutation來對store裡面的state進行更新的動作，action則是用來進行非同步的操作；在Redux中，則是統一透過action對store的state進行更新的動作。而且與Vuex不同的是Redux的action並不是像Vuex的action一樣是一個函式，Redux的action是一個含有type屬性的物件，dispatch一個action時，reducer會依照action的type屬性，來決定要進行什麼樣的state操作。Redux如果要進行非同步的操作，則會透過Middleware來處理。
在這次Redux的實作練習，主要是以一個購物車學習Redux Toolkit，使用Redux Toolkit能讓整體的程式碼更簡潔，也能讓使用Redux的繁瑣步驟變得更簡單。另外，活用RTK query也能讓非同步操作變得更好管理和撰寫。
路由對於SPA架構的網站是一個很重要的東西，因為可以幫助SPA架構的網站更好地進行頁面的切換，以及路由與對應頁面相關連的管理，還能優化網頁的效能。不論是Vue或是React都有自己一套路用的Library可以使用，Vue是使用vue-router，而React則是使用react-router，如果是想要用在網頁上的話，則需要使用以react-router為基底下去擴充網頁相關功能的react-router-dom。大多數在vue-router中常使用到的用法，在react-router-dom中也有對應的用法可以使用，但是還是有特定的用法是會需要額外透過寫一些函式才能達成，例如：路由守衛。
最後來分享一下我的完賽感言～
首先！我想要先大聲吶喊
「阿母！我成功了！」
我居然熬過這三十天了！雖然發文的天數只有三十天，但為了參加這次的鐵人賽，也為了確實地增加自己對於React的熟悉度，其實早在前一個半月我就開始透過閱讀官方文件來熟悉React，同時也一邊思考這次鐵人賽的文章我可以整理出哪些自己覺得很重要的內容當作這段期間學習的筆記。雖然透過這段期間的學習，我仍然不是一位senior，但的確在這個過程中，學習到了一些以前不理解，也不曾想過深入去理解的一些很基本的概念。也因為這趟學習旅程，讓自己在真正的實務中，能透過自己學習到的概念下去排除遇到的問題，而不只是亂槍打鳥的用盡各種方法，糊里糊塗地把問題解決。除了學習到了一些自己過往沒有好好認識的概念，也讓自己透過這段期間持續的學習培養了不要放過自己去理解背後真正原因的學習態度及習慣，這樣的態度不僅用在了參加鐵人賽的過程中，也確實地套用在實際的工作上，也許因為這樣的轉變，讓自己有時候在處理一些任務時，會花比較多的時間，但是在下次遇到同樣的問題時，也能更準確地知道問題點，並且以更正確的方式處理。
在這段旅程到達目的地的最後我想謝謝一些人～
首先想感謝與我一同作伴，被我推坑的團員們：）
本來是以「志在參加，不在完賽」的這個目標(?)來號招大家一起走上不歸路，但是大家即便工作再怎麼忙碌，還是都很努力地完成當天的文章，並且在當天結束前交出，真心覺得我的團員們都好棒、好優秀。也是因為有團員們一起奮鬥，讓我也更有動力和目標一步一腳印地往前邁進。
再來感謝身邊的一些大大
自從轉職成為工程師後，就斷斷續續參加了一些社群學習的活動，像是讀書會、曼陀號計畫，也在這些社群學習活動中，認識了很多厲害、優秀的人，並且從這些人身上學習到很多東西，不僅是技術，還有很正向的學習態度，及值得學習和效仿的人格特質。也是因為身邊有這麼多優秀的人，讓自己下定決心來挑戰這次的鐵人賽。其中想要特別感謝兩位大大，分別是Zet大大和PJ大大。近期透過參加曼陀號計畫認識了Zet大大，也透過他在活動中的分享學到了一些學習應該要有的正確態度，這樣的態度也讓我在這段的學習旅程中，有很大的幫助，當然Zet大大去年鐵人賽文章中傳遞的React觀念也是讓我獲益良多。之前有參加PJ大大組的讀書會，有一些React的觀念也是從這場讀書會中學習到的，另外，PJ大大也會分享一些React的觀念給讀書會的成員，像是Reconciliation。當然讀書會的成員們分享的React相關知識，也對於菜逼八的我幫助很大。
接著感謝我的室友
這陣子除了上班，我整天都宅在家不出門，而且都沒有打掃家裡，家裡都快變成廢墟了QQ，但是室友仍然對我不離不棄，而且也不會來打擾我趕文章，只會時不時問我是不是失敗了(咦？)，總之非常感謝我的室友，總是給我這麼大的空間自由發揮，等這個假日慶祝完後，我也會好好打掃家裡作為報答的><
這次參加這個鐵人賽其實還想要給一些正在轉職路上努力的人一些力量，雖然我現在還不是什麼很厲害的工程師，但還是完成了這三十天的挑戰了。如果剛好經過的你，還在懷疑自己是不是能轉職成軟體工程師的話，請一定要相信自己，並且讓自己好好地堅持下去，用正確的態度堅持在學習的道路上，你也一定可以拿到成為軟體工程師的入場券！當然成為工程師是一條不歸路，想要讓自己的職涯走得更長遠、更好，成為一位更好的工程師，還是得維持好的學習習慣。學習不會因為30天結束而停止，我還是會繼續強化自己，讓我們一起共勉之！
也希望這系列的文章能剛好對於路過的你有些幫助，謝謝:)
文末也附上一張陪著我熬夜的屁孩照
感謝作者能提供此系列文章，讓我可以同時學習vue和react，且在過程中可以透過比較兩者來加深印象與理解差異。
iThome鐵人賽
看影片追技術